<template>
  <div>
    <input type="text" placeholder="请输入内容" v-focus />
    <div v-color='color'>今天天气很不错，非常适合学习!</div>
    <button @click="color='green'">修改颜色</button>
  </div>
</template>

<script>
export default {
  //  自定义指令好处：
  //  1.避免频繁的操作DOM
  //  2.便于复用


  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
    color:{
      inserted(el,binding){
        console.log(binding)
          el.style.color=binding.value
      },
      update(el,{value}){
          el.style.color=value
      }
    }
  },

  data() {
    return {
      comName: "UserAccount",
      color:'yellowgreen'
    };
  },
  computed:{
    // 随机颜色
    //  color(){
    //   let str = '#'
    //    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    //    for(let i = 0;i<6;i++){
    //       let random = Math.floor(Math.random () * arr.length) 
    //        str+=arr[random]              
    //    }
    //    return str
    //  }
  }
};
</script>

<style>
</style>